<template>
	<view class="page">
		<nav-bar title="消息中心">
			<template #right>
				<view v-if="list.length && list.findIndex(it => it.readFlag === '0') > -1" class="flex-start"
					@click="readAllMessage">
					<!-- <van-icon name="brush-o" size="20" /> -->
					<van-icon name="completed-o" size="20" />
					<view class="text-color-0" style="margin-left: 5rpx;">全部已读</view>
				</view>
			</template>
		</nav-bar>

		<van-pull-refresh class="van-pull-refresh-page-with-nav" v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
				@load="onLoad" class="universal-list-list">
				<template v-if="list.length">
					<!-- <van-cell v-for="item in list" :key="item" class="item" :class="item.readFlag === '0' ? 'dot' : ''"
						:title="item.title || '-'" icon="volume-o" :value="item.msgType.label" is-link border
						@click="goLink(item)" /> -->
					<van-cell v-for="item in list" :key="item" class="item" :class="item.readFlag === '0' ? 'dot' : ''"
						:title="item.msgType.label" icon="volume-o" :value="item.createTimeStr" is-link border
						@click="goLink(item)" />
				</template>
				<template v-else>
					<van-empty v-if="!loading" description="暂无数据" />
				</template>
			</van-list>
		</van-pull-refresh>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow
	} from '@dcloudio/uni-app';

	import store from '@/store';

	import dayjs from 'dayjs';

	import {
		apiBizMessagePage,
		apiBizMessageMy,
		apiBizMessageMyRead,
		apiBizMessageMyReadAll,
	} from '@/api/message';

	const list = ref([]);
	const total = ref(0);
	const loading = ref(false);
	const finished = ref(false);
	const refreshing = ref(false);
	const pages = ref({
		pageNum: 1,
		pageSize: 10,
	})

	const onLoad = () => {
		getList();
	};

	const onRefresh = () => {
		refreshing.value = false;
		loading.value = true;
		finished.value = false;
		
		list.value = [];
		pages.value.pageNum = 1;
		onLoad();
	};

	const getPageList = () => {
		apiBizMessagePage({
			...pages.value,
		}).then(res => {
			setList(res)
		}).finally(() => {
			resetLoadingStatus()
		})
	}

	const getPageListMyList = () => {
		apiBizMessageMy({
			...pages.value,
		}).then(res => {
			setList(res)
		}).finally(() => {
			resetLoadingStatus()
		})
	}

	const getList = () => {
		getPageListMyList();
		// if (active.value === 'my') {
		// 	getPageListMyList();
		// } else {
		// 	getPageList();
		// }
	};

	const setList = (res, key) => {
		// 如果是第一页,列表数据清空
		if (pages.value.pageNum === 1) {
			list.value = [];
		};

		// 列表赋值
		res.data.map(item => {
			list.value.push({
				...item,
				createTimeStr: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
			})
		});
		total.value = res.total;
	};

	const resetLoadingStatus = () => {
		// 数据获取完毕，加载状态更新
		loading.value = false;

		// 数据获取完毕，下拉刷新状态更新
		refreshing.value = false;

		// 数据全部加载完成
		if (list.value.length >= total.value) {
			finished.value = true;
		} else {
			// 如果数据还有未加载部分
			finished.value = false;
		}

		if (!finished.value) {
			pages.value.pageNum++;
		}
	}

	const readAllMessage = () => {
		uni.showLoading({
			title: '阅读中',
			mask: true
		});

		apiBizMessageMyReadAll().then(res => {
			list.value.forEach(it => {
				it.readFlag = '1';
			});
		}).finally(() => {
			uni.hideLoading();
			store.dispatch('setMessageNumbers');
		});
	}

	const goLink = (item) => {
		uni.setStorageSync('message-detail', item);
		uni.navigateTo({
			url: `/pages/message/detail?id=${item.msgId}`
		})
	}
	onShow(() => {
		store.dispatch('setMessageNumbers');
	})
</script>

<style lang="scss" scoped>
	.page {
		:deep(.van-cell__value) {
			flex: none;
		}

		.item {
			// color: #999;

			// :deep(.van-cell__label) {
			// 	color: #999;
			// }

			// :deep(.van-cell__value) {
			// 	color: #999;
			// }

			// :deep(.van-cell__right-icon) {
			// 	color: #ccc;
			// }

			&.dot {
				color: #ee0a24;

				// :deep(.van-cell__label) {
				// 	color: #666;
				// }

				// :deep(.van-cell__value) {
				// 	color: #333;
				// }

				// :deep(.van-cell__right-icon) {
				// 	color: #333;
				// }
			}
		}

		// .item {
		// 	position: relative;

		// 	&.dot {
		// 		&::after {
		// 			position: absolute;
		// 			content: '';
		// 			width: 10rpx;
		// 			height: 10rpx;
		// 			border-radius: 50%;
		// 			background-color: red;
		// 			right: 65rpx;
		// 			top: 55rpx;
		// 		}
		// 	}
		// }

		// .type {
		// 	position: relative;
		// 	padding-right: 15rpx;

		// 	&.dot {
		// 		&::after {
		// 			position: absolute;
		// 			content: '';
		// 			width: 10rpx;
		// 			height: 10rpx;
		// 			border-radius: 50%;
		// 			background-color: red;
		// 			right: 0;
		// 			top: 10rpx;
		// 		}
		// 	}
		// }
	}
</style>